<template>
	<view class="work-record">
		<view class="line"><text></text></view>
		<view class="content">
			<view class="content_title">添加维修记录</view>
			<view class="content_item">
				<view class="name">维修类型
				<text>*</text>
				</view>
				<dropdown :list="list" :value="obj.disposeType" @change="getData" @showDropDown="showDropDown"></dropdown>
				</view>
			<view class="content_item">
				<view class="name">电梯配件
				<text>*</text>
				</view>
				<repair-fitting @repairFit="getPart" :reset="restFlag" :elevatorId="elevatorId" ref="repairFitting"></repair-fitting></view>
			<view class="imgBox">
				<view class="name">设备检修/更换配件照片
				<text>*</text>
				</view>
				<image-drag-sort :max="9" @changeList="changeImg" :list="obj.disposeImgUrl">
					
				</image-drag-sort></view>
			<!-- 备注 -->
			<view class="notice">
				<view class="name">
					维修备注(选填)
				</view>
				<view class="area">
					<textarea
						v-model="obj.disposeDesc"
						placeholder="请输入备注内容"
						placeholder-class="textare"
						style="font-size: 28rpx;height:150rpx;width: 100%;"
						maxlength="300"
						:always-embed="true"
					/>
					<view class="length">{{ obj.disposeDesc.length + '/300' }}</view>
				</view>
				
			</view>
		
		</view>

		<view class="save"><button hover-class="none" @click="handleSave">提交</button></view>
	</view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/index.vue';
import dropdown from '@/components/dropdown/dropdown.vue';
// import unipopup from '@/components/uni-popup/uni-popup';
import { mapState, mapActions } from 'vuex';
import { editCHeckRecord } from '@/apis/workOrder.js';

import RepairFitting from '@/components/repairFitting/repairFitting.vue';
import {  rescueDetail } from '@/apis/elevator.js';
import { update, setRecord, fetchDetail } from '@/apis/repair.js';
export default {
	props: {
		planId: {
			type: String
		},
		restFlag: {
			type: String
		},
		elevatorId:{
			type: String
		}
	},
	components: {
		ImageDragSort,
		dropdown,
		RepairFitting
		// unipopup
	},

	data() {
		return {
			obj: {
				disposeImgUrl: [],
				disposeDesc: '',
				disposeType: '',
				checkTypeId: '',
				partIds: '',
				checkContentId: '',
				partNames: ''
			},
			list: ['设备维修', '更换部件'],
			refresh: 0,
			isEdit: false,
			planOrderStatus: ''
		};
	},
	watch: {
		
	},
	created() {},
	computed: {
		...mapState('user', ['userinfo'])
	},
	methods: {
		showDropDown(res) {
			this.$refs.repairFitting.close();
		},
		// 获取设备类型
		getData(res) {
			this.obj.disposeType = res + 1;
		},
		getPart(res) {
			let partIds = res.ids || [];
			let partNames = res.names || []; 
			if(res.flag && res.flag.id){
				this.obj.floorStandIds = res.flag.ids.join(',');
				this.obj.floorStandNames = res.flag.names.join(',');
			} else {
				delete this.obj.floorStandIds;
				delete this.obj.floorStandNames;
			}
			this.obj.partIds = partIds.join(',');
			this.obj.partNames = partNames.join('&&');
		},
		changeImg(val) {
			console.log(val, 'val的值');
			this.obj.disposeImgUrl = val;
		},
		async handleSave() {
			uni.showLoading({
				title:'请稍后',
				mask:true
			});
			await this.getDetail();
			uni.hideLoading();
			if (this.planOrderStatus === 4) {
				console.log('完成');
				this.$emit('hadDone');
			} else {
				const { disposeImgUrl, disposeDesc, disposeType, partNames } = this.obj;
			
				if (!disposeImgUrl.length || !partNames || !disposeType) {
					let str = '';
					if (!disposeType) {
						str = '请选择维修类型';
					}
					if (!disposeImgUrl.length) {
						str = '请上传设备检修/更换配件照片';
					}
					if (!partNames) {
						str = '请选择电梯配件';
					}
					
					uni.showToast({
						title: str,
						icon: 'none'
					});
					return false;
				} else {
					let parts = this.obj.partNames.split('&&');
					if (!parts[parts.length - 1]) {
						uni.showToast({
							title: '自定义配件内容不能为空',
							icon: 'none'
						});
						return;
					}
					uni.showLoading({
						title:'提交',
						mask:true
					});
					console.log('更新部件',{ ...this.obj, planId: this.planId, recordDesc: '创建了记录', userId: this.userinfo.user_id });
				 let obj = JSON.parse(JSON.stringify(this.obj));
				 let imgs = obj.disposeImgUrl;
				 let arr = [];
				 for (let i = 0; i < imgs.length; i++) {
				 	 arr.push({
						 url:imgs[i],
						 type:'image'
					 });
				 }
				 obj.disposeImgUrl = arr;
					update({ ...obj, planId: this.planId,   userId: this.userinfo.user_id }).then(res => {
						this.addMsg(res.data);
					});
				}
			}
		},
		addMsg(checkHistoryId) {
			uni.showLoading({
				title: '保存中',
				mask: true
			});
	 
			const params = {
				planId:this.planId,
				userId: this.userinfo.user_id,
				checkHistoryId:checkHistoryId,
				recordLog: '创建了记录',
				recordDataValue: this.obj
			};
			editCHeckRecord(params).then(res => {
				console.log(res);
				
				uni.hideLoading();
				this.obj = {
					disposeImgUrl: [],
					disposeDesc: '',
					disposeType: '',
					checkTypeId: '',
					partIds: '',
					checkContentId: '',
					partNames: ''
				};
				uni.showToast({
				 	title: '新增成功',
				 	icon: 'none'
				 });
				this.$emit('update');
			});
		},
		getDetail() {
			return new Promise((resolve)=>{
				rescueDetail({ planId: this.planId })
					.then(res=>{
						if (res) {
							this.planOrderStatus = res.data.status;
							resolve();
						}
					});
			});
		}
	}
};
</script>
<style>
textare {
	/* height: 200rpx; */
}
.textare {
	/* color: red; */
	/* 	width: 100%!important; */
}
</style>
<style lang="scss" scoped>
.work-record {
	background-color: #fff;
	padding: 20rpx 40rpx 32rpx 40rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	.line {
		margin-bottom: 18rpx;
		display: flex;
		justify-content: center;
		text {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}
	.content {
		.content_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 28rpx;
		}
        .content_item{
				margin-bottom: 16rpx;
			.name{
				font-size: 26rpx;
				margin-bottom: 16rpx;
				color: #333;
				text{
					color: #e54b4b ;
				}
			}
		}
		.imgBox {
			padding-bottom: 32rpx;
			// border-bottom: 2rpx solid #e9e9e9;
			.name{
				margin-bottom: 16rpx;
				font-size: 26rpx;
				color: #333;
				text{
					color: #e54b4b ;
				}
			}
			
		}
		.notice {
			width: 100%;
			padding-top: 32rpx;
			padding-bottom: 20rpx;
			// height: 200rpx;
			.name{
				display: flex;
				font-size: 26rpx;
				color: #999999;
				margin-bottom: 16rpx
			}
			.area{
				padding: 20rpx;
				border: 2rpx solid #e9e9e9;
			}
		}
		textarea {
			font-size: 28rpx;
		}
		.length {
			text-align: right;
			// padding-bottom: 20rpx;
			color: #ccc;
		}
	}
	.save {
		display: flex;
		justify-content: center;
		button {
			display: flex;
			width: 670rpx;
			height: 70rpx;
			// background: #0091ff;
			border-radius: 8rpx;
			// color: #fff;
			justify-content: center;
			align-items: center;
		}
		// .disabled{
		// 	color: #fff;
		// 	background-color: #ccc!important;
		// 	pointer-events: none;

		// }
	}
}
</style>
